<template>
  <div class="conceptview">
    <el-tabs v-model="activeName" class="head" @tab-click="handleClick" >
      <el-tab-pane
        v-for="subject in subjects" 
        class="head"
        :name="subject"
        :key="subject"
      >
      <span slot="label" @click="getconcept(subject)">{{subject}}</span>
        <div class="row">
          <div class="concepts">
            <div class="concpetlist" >
              <p>学科大概念</p>
              <div
                :style="{height: '430px'}"
                style="overflow-y: scroll;margin-top:6px;scrollbar-width: none; scrollbar-height: none;" >
                <div
                  v-for="concept in concepts"
                  :key="concept"
                  class="listcontent"
                >
                <el-link :underline="false" @click="getRelatedEntity(concept)" class="listcontent">
                  <i class="el-icon-star-off" style="margin-right: 2px;"></i>
                  {{concept}}
                </el-link>
                </div>  
              </div>
            </div>
              
          </div>
          <div class="literacy">
            <p style="margin-bottom: 7px">学科核心素养</p>
            <div :style="{height: '430px'}"
                style="overflow-y: scroll;scrollbar-width: none; scrollbar-height: none;">
            <div
                v-for="competence in competences"
                :key="competence"
                class="listcontent"
            >
            <el-link :underline="false" @click="getRelatedEntity(competence)" class="listcontent">
            <i class="el-icon-star-on" style="margin-right: 7px;"></i>{{competence}}
            </el-link>
            </div>
            </div>
          </div>
        </div>
      <!-- <div calss="row">
          <div class="literacy">
              <p>学科核心素养</p>
              <div
                  v-for="concept in concepts"
                  :key="concept"
                  class="concept"
              >{{concept}}</div>
          </div>
      </div> -->
      </el-tab-pane>
    </el-tabs>
    <div class="graph">
      <k-g-chart ref="chart" :entities="entities.entities"></k-g-chart>
    </div>
  </div>
</template>
<script>
import KGChart from '@/components/Chart/KGChart'
import { relatedEntity} from '@/api/entity'
import { authentication,register } from '@/api/auth'
import { getConcpet } from '@/api/concept'
import TeachingPlan from '@/view/Instruction/TeachingPlan.vue'
export default {
  name: 'ConceptView',
  components: {
    KGChart,
  },
  data() {
    return {
      subjects: ['语文', '数学', '英语', '物理', '化学', '生物', '历史', '地理', '政治','信息技术'],
      concepts: [],
      competences: [],
      selectedSubject: '',
      activeName: '语文', 
      entities: {
        entities: []
      },
      userinfo: JSON.parse(window.localStorage.getItem('user')),
      idLogin: false,
      userType:0,
      chartKey: 0,
    }
  },
  computed: {
    graphEntity() {
      return this.entities.entities
    },
  },
  watch: {
    graphEntity: {
      handler() {
        this.$refs.chart.initCharts()
      }
    },
  },
  created() {
    authentication().then((response) => {
      if (response.data.code === 200) {
        this.isLogin = true
        this.userType = this.userinfo.userType
        this.getnowSubject()
        this.getNowconcept()
        this.getRelatedEntity(this.activeName)
      }else{
        this.activeName = '语文'
        
      }
    })
    this.getNowconcept()
    this.getRelatedEntity(this.activeName)
  },
  methods: {
    // 获取学科大概念和核心素养
    getconcept(subject){
      this.selectedSubject=''
      this.concepts=[]
      this.competences=[]
      this.selectedSubject=subject
      getConcpet(this.selectedSubject).then(response => {
        if (response.data.code === 200) {
          this.concepts = response.data.data.conceptList
          this.competences = response.data.data.competenceList
        }
      })
      this.getRelatedEntity(subject)
    },
    //获取当前的
    getNowconcept(){
      this.selectedSubject=''
      this.concepts=[]
      this.competences=[]
      this.selectedSubject=this.activeName
      getConcpet(this.selectedSubject).then(response => {
        if (response.data.code === 200) {
          this.concepts = response.data.data.conceptList
          this.competences = response.data.data.competenceList
        }
      })
    },
    //图谱呈现相关
    resetEntity() {
      this.entities.entities = []
    },
    getRelatedEntity(keyword) {
      this.resetEntity()
      relatedEntity(keyword).then(response => {
        if (response.data.code === 200) {
          this.entities.entities = response.data.data
          // console.log('知识图谱', this.entities.entities)
        }
      })
      this.chartKey++;
    },
    //根据用户选择呈现学科
    getnowSubject() {
      if(this.userType === 1){
        this.activeName = this.userinfo.subject
        if(!this.subjects.includes(this.activeName)){
          this.activeName='语文'
        }

      }else{
        this.activeName = '语文'
      }

    },
    handleClick(tab, event) {
      this.resetEntity()
      console.log(tab, event)

    }
  }
}

</script>
<style scoped>
.concpetview{

}
.head {
    margin-left: 1.5rem;
    height: 540px;
}
.row {
  display: flex;
  margin-left: -1.5rem;
  height: 100%;
}
.concepts {
 width:70%;
 display: flex;
 margin-bottom: 75px;
}
p {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
}
.concpetlist {
  width: 50%;
  
}
.graph {
  position: absolute;
  z-index: 999;
  top:110px;
  left:390px;
  bottom: 20px;
  height: 78%;
  width:36%;
  background-color: rgb(255, 255, 255);
  border: 1px solid #dbdbdb;
}

.literacy {
  margin-left: 2%;
  margin-bottom: 75px;
  width: 30%;
  /* background-color: rgb(255, 235, 252); */
}

.listcontent {
  font-size: 18px;
  height: 32px;
  padding-left: 2%;
  color:black;
  
}

</style>